<template>
  <div>
    全部tHead:
    <a-checkbox-group v-model="defaultShow" @change="onChangeCheckBox">
      <a-checkbox v-for="(item,index) in columns" :key="index" :value="item.dataIndex">
        {{ item.title }}
      </a-checkbox>
    </a-checkbox-group>
    <br>
    选中的tHeaderShow:
    <a-checkbox-group>
      <a-checkbox v-for="(item,index) in tHeaderShow" :key="index" :value="item.dataIndex">
        {{ item.title }}
      </a-checkbox>
    </a-checkbox-group>
    <a-table :columns="tHeaderShow" :data-source="data" @change="onChange" />
  </div>
  
</template>
<script>


export default {
  name: 'TableFilter',
  data() {
    return {
      defaultTheadShow: ['name'],
      data: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park'
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park'
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park'
        },
        {
          key: '4',
          name: 'Jim Red',
          age: 32,
          address: 'London No. 2 Lake Park'
        }
      ],
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          filters: [
            {
              text: 'Joe',
              value: 'Joe'
            },
            {
              text: 'Jim',
              value: 'Jim'
            },
            {
              text: 'Submenu',
              value: 'Submenu',
              children: [
                {
                  text: 'Green',
                  value: 'Green'
                },
                {
                  text: 'Black',
                  value: 'Black'
                }
              ]
            }
          ],
          // specify the condition of filtering result
          // here is that finding the name started with `value`
          onFilter: (value, record) => record.name.indexOf(value) === 0,
          sorter: (a, b) => a.name.length - b.name.length,
          sortDirections: ['descend']
        },
        {
          title: '年龄',
          dataIndex: 'age',
          defaultSortOrder: 'descend',
          sorter: (a, b) => a.age - b.age
        },
        {
          title: '地址',
          dataIndex: 'address',
          filters: [
            {
              text: 'London',
              value: 'London'
            },
            {
              text: 'New York',
              value: 'New York'
            }
          ],
          filterMultiple: false,
          onFilter: (value, record) => record.address.indexOf(value) === 0,
          sorter: (a, b) => a.address.length - b.address.length,
          sortDirections: ['descend', 'ascend']
        }
      ],
      tHeaderShow: [],
      tHeaderLeft: [],
      tHeaderRigth: []
    }
  },
  created(){
    // this.tHeaderShow = JSON.parse(JSON.stringify(this.columns))
    // this.tHeaderShow = this.columns.filter(item=>{
    //   return this.defaultTheadShow.includes(item.)
    // })

  },
  methods: {
    onChange(pagination, filters, sorter) {
      console.log('params', pagination, filters, sorter)
    },
    onChangeCheckBox(checkedValues) {
      console.log('checked = ', checkedValues)
      this.tHeaderShow = this.columns.filter(item=>{
        return checkedValues.includes(item.dataIndex)
      })
      console.log(this.tHeaderShow)
      setTimeout(() => {
        console.log(this.defaultShow)
      }, 10)
    }
  }
}
</script>
